const baseUrl = 'http://api-breakingnews-web.itheima.net'
let token = localStorage.getItem('token')
// 1. 初始化裁剪插件
let cropper
//2.点击选择图片按钮  触发input type=file 的click事件
$('.select').on('click', () => {
    // console.log('123');
    $('#file').click()

})
// 3. 选择文件窗口出现 - 选中文件点击打开, 会触发change事件
$('#file').on('change', (e) => {
    const file = e.target.files[0]
    // URL是window内置的对象, 
    //createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
    const url = URL.createObjectURL(file)//blob对象  可预览的地址
    cropper.replace(url); // 让cropper重新设置图片url地址以及重新构建cropper
})
//4.点击确定上传头像
$('.sure').on('click', (e) => {
    console.log('123');
    //看接口文档需要传什么参数
    //avatar 新头像，base64格式的字符串
    //4.1  cropper对象身上 有 getCroppedCanvas方法可以转成cavans
    const canvas = cropper.getCroppedCanvas({
        // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 
        // width和height是canvas标签的大小
        with: 100,
        hight: 100
    })
    // //4.2canvas  身上有toDataURL()方法将canvas 图像转换为base64格式
    let base64Str = canvas.toDataURL("image/jpeg"); // canvas图像 -> base64字符串
    //   // 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
    base64Str = encodeURIComponent(base64Str);
    //   console.log(base64Str);

    const argStr = `avatar=${base64Str}`
    axios.post(`${baseUrl}/my/update/avatar`, argStr, {
        headers: {
            Authorization: token
        }
    }).then((res) => {
        //    console.log(res);
        //重新渲染父页面的头像
        window.parent._getUserInfo()
    })
})
//5.设置默认头像
//获取头像信息
function getUserPic() {
    axios.get(`${baseUrl}/my/userinfo`, {
        headers: {
            Authorization: token
        }
    }).then((res) => {
        if (res.data.status === 0) {
            const {user_pic} = res.data.data
            //有图片
            if (user_pic) {
                $('#image').prop('src', user_pic)
            }
            cropper = new Cropper($("#image")[0], {
                aspectRatio: 1, // 裁剪图层的横纵比例
                preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
            });
        }
    })
}
getUserPic()